<template>
  <div class="history">
    <div class="title">
      <div>
        <el-button
          :type="activeTab == 'record' ? 'primary' : 'default'"
          text
          size="large"
          @click="handleTabClick('record')"
        >
          记录(<span style="color: red">{{ unfinished }}</span>)
        </el-button>
      </div>
      <div>
        <el-button
          :type="activeTab == 'complete' ? 'primary' : 'default'"
          text
          size="large"
          @click="handleTabClick('complete')"
        >
          完成({{ finished }})
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-scrollbar>
        <p
          v-for="(item, index) in historyList"
          :key="index"
          class="scrollbar-demo-item"
          :class="{ active: historyActive === index }"
          @click="handleHistory(index)"
          @contextmenu.prevent="showHistoryContextMenu($event, item)"
        >
          {{ item.title }}
        </p>
      </el-scrollbar>
    </div>
    <div class="btn">
      <el-date-picker
        v-model="historyDate"
        type="date"
        placeholder="请选择日期"
        :disabled-date="disabledDate"
        :format="customDateFormat"
        :value-format="customDateFormat"
        size="small"
        @change="handleDateChange"
      />
      <el-button type="danger" size="small" @click="HistoryDelete">删除</el-button>
    </div>
    <UploadDeleteContextMenu
      :visible="UploadDeleteContextMenuVisible"
      :position="UploadDeleteContextMenuPosition"
      :data="UploadDeleteContextMenuData"
      @upload="handleHistoryUpload"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from 'vue'
import { historyDataStoreHook } from '@store/historyStore'
import { tableDataStoreHook } from '@store/dataStore'
import { ElMessageBox, ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
// import daysjs from 'dayjs'
import { type QuoteRecord } from '@/api/quote/types'
import UploadDeleteContextMenu from './rightClickMenu/UploadDeleteContextMenu.vue'
const UploadDeleteContextMenuVisible = ref(false)
const UploadDeleteContextMenuPosition = reactive({ x: 0, y: 0 })
const UploadDeleteContextMenuData = ref<QuoteRecord>({
  id: 0,
  serial_number: '',
  text: '',
  title: '',
  uid: 0,
  create_time: '',
  delete: 0,
  update_time: '',
  company_id: 0,
  company_name: '',
  totalAmount: 0
})

const historyDataStore = historyDataStoreHook()
const tableDataStore = tableDataStoreHook()
// const currentDate = daysjs()
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
const customDateFormat = ref<string>('YYYY-MM-DD')
// const historyDate = ref(currentDate.format('YYYY-MM-DD'))

const quotelistApis = () => {
  // let isFinish = 1
  // if (activeTab.value == 'complete') {
  //   isFinish = 2
  // }
  historyDataStore.getHistoryList()
}

const getFinishCountApis = async () => {
  await historyDataStore.getFinishCount()
}
const { historyList, historyActive, historyDate, activeTab, unfinished, finished } =
  storeToRefs(historyDataStore)
// 处理标签页切换
const handleTabClick = (tab: string) => {
  activeTab.value = tab
  quotelistApis()
  getFinishCountApis()
}

onMounted(() => {
  quotelistApis()
  getFinishCountApis()
})

// 处理历史记录点击
const handleHistory = (index: number) => {
  historyDataStore.clickHistoryActive(index)
}

// 显示右键菜单
const showHistoryContextMenu = (
  event: MouseEvent,
  row: QuoteRecord // 👈 这里用联合类型
) => {
  // 阻止默认右键菜单
  event.preventDefault()
  event.stopPropagation()
  // 设置菜单位置
  UploadDeleteContextMenuPosition.x = event.clientX
  UploadDeleteContextMenuPosition.y = event.clientY
  UploadDeleteContextMenuData.value = row
  // 显示菜单
  UploadDeleteContextMenuVisible.value = true
}
// 处理日期变化
const handleDateChange = (value: string) => {
  historyDate.value = value
  closeHistoryContextMenu()
  quotelistApis()
  getFinishCountApis()
}

// 删除历史记录
const HistoryDelete = () => {
  if (historyActive.value < 0) {
    ElMessage({
      type: 'error',
      message: '请选择要删除的'
    })
  }
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    draggable: true,
    type: 'warning'
  }).then(() => {
    const list = historyList.value[historyActive.value]
    historyDataStore.deleteHistory(list.id)
  })
}
// 关闭右键菜单
const closeHistoryContextMenu = () => {
  UploadDeleteContextMenuVisible.value = false
}

// 监听全局点击事件关闭右键菜单
watch(
  () => tableDataStore.closeContextMenuFlag,
  () => {
    closeHistoryContextMenu()
  }
)
const handleHistoryUpload = () => {
  quotelistApis()
  getFinishCountApis()
  UploadDeleteContextMenuVisible.value = false
  UploadDeleteContextMenuPosition.x = 0
  UploadDeleteContextMenuPosition.y = 0
  UploadDeleteContextMenuData.value = {
    id: 0,
    serial_number: '',
    text: '',
    title: '',
    uid: 0,
    create_time: '',
    delete: 0,
    update_time: '',
    company_id: 0,
    company_name: '',
    totalAmount: 0
  }
  historyDataStore.resetHistoryActive()
  historyDataStore.resetSerialNumber()
}
</script>

<style lang="scss" scoped>
.history {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 4px;
  .title {
    font-size: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .content {
    height: 416px;
    overflow: auto; /* 开启滚动条 */
    .active {
      background-color: #f5f5f5;
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
</style>
